<template>
  <div>
    <hr>
    <el-header>
      <el-link v-for="(item,index) in selArr"
               :type="index==linkIndex?'danger':''"
               :key="item.value"
               @click="linkClick(item.value,index)">{{item.label}}</el-link>
    </el-header>
    <el-table class="mytab"
              :data="tableData"
              stripe
              border
              style="width: 100%"
              :cell-class-name="colFn">
      <el-table-column prop="pname"
                       label="商品名称"
                       width="180"
                       class="isred">
      </el-table-column>
      <el-table-column prop="price"
                       label="商品价格"
                       width="180">
      </el-table-column>
      <el-table-column prop="oldPrice"
                       label="商品原价">
      </el-table-column>
      <el-table-column prop="sel"
                       label="商品类别">
        <template slot-scope="scoped">
          <div>
            <!-- scoped.row当前行数据 -->
            {{selStr(scoped.row.sel)}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="inventory"
                       label="库存">
      </el-table-column>
      <el-table-column prop="isRed"
                       label="是否标红">
      </el-table-column>
      <el-table-column prop="address"
                       label="操作">
        <template slot-scope="scoped">
          <div>
            <el-link type="danger"
                     @click="delData(scoped.row._id)">删除</el-link>
            <el-link type="success"
                     @click="edit(scoped.row)"> 编辑</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination background
                   layout="prev, pager, next"
                   :total="total"
                   :page-size="pageSize"
                   :current-page="currentPage"
                   @current-change="pageChange">
    </el-pagination>
  </div>
</template>

<script>
import { getList, delList } from '../api/test'
export default {
  name: 'Ljfvue2011Testtable',
  props: ["sel"],
  watch: {
    "sel": {
      handler (newVal, oldVal) {
        console.log(newVal)
        this.selArr = [{ label: "全部", value: "" }, ...newVal]
        console.log(this.selArr)
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      linkIndex: 0,
      tableData: [],//表格数据
      total: 0,//总数据条数
      pageSize: 3,//每页数量
      currentPage: 1, //当前页码
      selstr: "",//分类
      selArr: [],
      colFn ({ row, columnIndex, rowIndex }) {
        console.log({ row, columnIndex, rowIndex })
        // columnIndex 列的下标
        // rowIndex 行的下标
        if (columnIndex == 0) {
          if (row.isRed == "是") {
            return "isred"
          } else {
            return ""
          }
        }
      }
    }
  },
  computed: {

  },
  created () {
    // 首次加载
    this.getTableList()
  },
  mounted () {

  },

  methods: {
    linkClick (val, index) { //点击分类
      this.linkIndex = index;//改变分类的激活下标
      this.selstr = val;//改变分类的查询条件
      this.getTableList();
    },
    // 点击修改
    edit (row) {
      // 触发自定义事件  向父组件传参
      this.$emit("send", row)
    },
    // 删除方法
    async delData (id) {
      var res = await delList(id)//调用删除接口
      this.getTableList();//从新获取列表
    },
    //获取列表
    async getTableList () {
      var res = await getList({
        page: this.currentPage,
        pageSize: this.pageSize,
        sel: this.selstr //分类条件
      })
      console.log(res)
      this.tableData = res.data.data;
      this.total = res.data.total;
    },
    pageChange (val) {//当前页码改变事件
      console.log(val)
      this.currentPage = val;//改变当前页码
      this.getTableList();
    },
    selStr (sel) {
      if (sel == "1") {
        return "水果"
      } else if (sel == "2") {
        return "熟食"
      } else if (sel == "3") {
        return "酒水"
      } else if (sel == "4") {
        return "零食"
      } else {
        return ""
      }
    }
  },
};
</script>

<style lang="less" >
.el-header {
  .el-link {
    margin-left: 40px;
  }
}
th {
  text-align: center !important;
}
td {
  text-align: center !important;
}
.isred {
  color: red;
}
</style>